<template>
	<view class="repair-page">

		<!-- 选项卡 -->
		<view class="tabs">
			<view class="tab" :class="{ active: activeTab === 'ongoing' }" @tap="switchTab('ongoing')">
				进行中
			</view>
			<view class="tab" :class="{ active: activeTab === 'completed' }" @tap="switchTab('completed')">
				已完成
			</view>
		</view>

		<!-- 筛选条件 -->
		<view class="filter-section">
			<!-- 维修方式选择 -->
			<view class="filter-item">
				<text>维修方式：</text>
				<uni-data-select v-model="selectedMethod" :localdata="repairMethods" label="维修方式" placeholder="请选择维修方式"
					:clear="false" @change="onMethodChange" style="width: 100px;"></uni-data-select>
			</view>

			<!-- 预约日期范围选择 -->
			<view class="filter-item">
				<text>预约日期：</text>
				<uni-datetime-picker v-model="selectedDateRange" type="daterange" :start="startDate" :end="endDate"
					rangeSeparator="至" @change="onDateRangeChange"></uni-datetime-picker>
			</view>
		</view>

		<!-- 维修记录列表 -->
		<view class="repair-list">
			<view class="repair-item" v-for="(item, index) in filteredRecords" :key="index" @tap="goToDetail(item.id)">
				<view class="repair-id">维修单号：{{ item.id }}</view>
				<view class="repair-method">维修方式：{{ item.method }}</view>
				<view class="appointment-date">预约日期：{{ item.date }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue';

	// 当前选中的选项卡
	const activeTab = ref('ongoing');

	// 维修方式选项
	const repairMethods = ref([{
			value: 'all',
			text: '全部'
		},
		{
			value: 'store',
			text: '到店维修'
		},
		{
			value: 'pickup',
			text: '上门取车'
		},
		{
			value: 'remote',
			text: '远程支持'
		},
		{
			value: 'self',
			text: '自助维修'
		}
	]);

	// 选中的维修方式
	const selectedMethod = ref('all');

	// 选中的日期范围
	const selectedDateRange = ref([]);

	// 日期选择范围
	const startDate = ref('2022-01-01'); // 最小日期
	const endDate = ref('2023-12-31'); // 最大日期

	// 维修记录数据
	const filteredRecords = ref([]);

	// 切换选项卡
	const switchTab = (tab) => {
		activeTab.value = tab;
		fetchRepairRecords(); // 切换选项卡时重新获取数据
	};

	// 维修方式选择事件
	const onMethodChange = (e) => {
		console.log('选中的维修方式：', e);
		fetchRepairRecords(); // 维修方式变化时重新获取数据
	};

	// 日期范围选择事件
	const onDateRangeChange = (e) => {
		console.log('选中的日期范围：', e);
		fetchRepairRecords(); // 日期范围变化时重新获取数据
	};

	// 监听筛选条件的变化
	watch([selectedMethod, selectedDateRange], () => {
		fetchRepairRecords(); // 筛选条件变化时重新获取数据
	});

	// 请求接口获取维修记录
	const fetchRepairRecords = async () => {
		try {
			// // 构造请求参数
			// const params = {
			// 	method: selectedMethod.value,
			// 	startDate: selectedDateRange.value[0],
			// 	endDate: selectedDateRange.value[1],
			// 	tab: activeTab.value,
			// };

			// // 模拟请求接口
			// const response = await fetch('/api/repair-records', {
			// 	method: 'POST',
			// 	body: JSON.stringify(params),
			// });
			// const data = await response.json();

			// // 更新维修记录数据
			// filteredRecords.value = data;

			filteredRecords.value = [{
					id: '3535256',
					method: '到店维修',
					date: '2022/11/10'
				},
				{
					id: '3535257',
					method: '上门取车',
					date: '2022/11/11'
				},
				{
					id: '3535258',
					method: '远程支持',
					date: '2022/11/12'
				},
				{
					id: '3535259',
					method: '自助维修',
					date: '2022/11/13'
				}
			];
		} catch (error) {
			console.error('请求接口失败：', error);
		}
	};

	// 跳转到详情页
	const goToDetail = (id) => {
		uni.navigateTo({
			url: `/packageIndex/repair/repairDetail/repairDetail?tab=${activeTab.value}&id=${id}`,
		});
	};
	// 初始化时获取数据
	fetchRepairRecords();
</script>

<style>
	/* 页面整体样式 */
	.repair-page {
		padding: 20rpx;
		background-color: #fff;
	}

	/* 页面标题 */
	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		text-align: center;
		margin-bottom: 20rpx;
	}

	/* 选项卡样式 */
	.tabs {
		display: flex;
		justify-content: space-around;
		margin-bottom: 20rpx;
	}

	.tab {
		font-size: 28rpx;
		color: #666;
		padding: 10rpx 20rpx;
		border-bottom: 2rpx solid transparent;
	}

	.tab.active {
		color: #1D6FFF;
		border-bottom-color: #1D6FFF;
	}

	/* 筛选条件样式 */
	.filter-section {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		margin-bottom: 20rpx;
	}

	.filter-item {
		display: flex;
		align-items: center;
		gap: 10rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: #333;
		width: 70vw;
	}

	/* 维修记录列表样式 */
	.repair-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.repair-item {
		padding: 20rpx;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.repair-id,
	.repair-method,
	.appointment-date {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
	}
</style>